<template>
  <a-card :bordered="false" title="规格参数" style="min-height: 100vh">
    <a-row>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :lg="6">
              <a-form-item label="属性名">
                <a-input v-model="attrName" placeholder="请输入属性名称" :allowClear="true"></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item label="关键字">
                <a-input v-model="keywords" placeholder="请输入关键字" :allowClear="true"></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="4">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <a-button type="primary" class="button-left" @click="searchQueryAll" icon="search">查询全部</a-button>
                  <a-button type="primary" class="button-left" @click="handleAdd" icon="plus">新增</a-button>
                  <a-button type="danger" class="button-left" @click="handleDelete" icon="delete"
                            :disabled="!selectedRowKeys.length > 0">批量删除</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-row>
    <a-row>
      <a-col :span="6">
        <select-attr-component @node="selectNode"></select-attr-component>
      </a-col>
      <a-col :span="18">
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          class="j-table-force-nowrap"
          @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
                <a-popconfirm title="确定删除吗?" @confirm="() => deleteById(record.id)">
                  <a>删除</a>
                </a-popconfirm>
        </span>
          <template slot="searchType" slot-scope="text, record">
            <a-icon v-if="record.searchType ==1" type="check-circle" />
            <a-icon v-else type="close-circle" />
          </template>
          <template slot="valueType" slot-scope="text, record">

            <a-tag color="pink" v-if="record.valueType == 1">
              多选
            </a-tag>
            <a-tag color="pink" v-else>
              单选
            </a-tag>
          </template>
          <template slot="enable" slot-scope="text, record">
            <a-icon v-if="record.enable ==1" type="check-circle" />
            <a-icon v-else type="close-circle" />
          </template>
        </a-table>
      </a-col>
    </a-row>
    <attr-modal ref="modalForm" @ok="initAttributeList"></attr-modal>
  </a-card>
</template>
<script>
import selectAttrComponent from '../../components/compents/SelectAttrComponent.vue'
import AttrModal from './product-attr/AttrModal.vue'
import { getAction } from '../../api/manage'

export default {
  components: { selectAttrComponent, AttrModal },
  data() {
    return {
      dataSource: [],
      keywords: null,
      attrName: null,
      nodeId: null,
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      selectedRowKeys: [],
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '属性名',
          align: 'center',
          dataIndex: 'attrName'
        },
        {
          title: '可检索',
          align: 'center',
          dataIndex: 'searchType',
          scopedSlots: { customRender: 'searchType' }
        },
        {
          title: '值类型',
          align: 'center',
          dataIndex: 'valueType',
          scopedSlots: { customRender: 'valueType' }
        },
        {
          title: '可选值',
          align: 'center',
          dataIndex: 'valueSelect'
        },
        {
          title: '启用',
          align: 'center',
          dataIndex: 'enable',
          scopedSlots: { customRender: 'enable' }
        },
        {
          title: '所属分类',
          align: 'center',
          dataIndex: 'categoryName'
        },
        {
          title: '所属分组',
          align: 'center',
          dataIndex: 'groupName'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        initAttributeList: '/product/attribute/listPage',
        deleteAttrGroupByIds: '/product/attrGroup/deleteBatch',
        deleteAttrGroupById: '/product/attribute/delete'
      }
    }
  },
  methods: {
    /**
     * 分类组件选择节点
     * @param nodeId
     */
    selectNode(nodeId) {
      this.nodeId = nodeId
      this.initAttributeList()
    },
    /**
     * 初始化分组列表
     */
    initAttributeList() {
      this.loading = true
      getAction(this.url.initAttributeList, {
        categoryId: this.nodeId,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
        attrName: this.attrName,
        keywords: this.keywords,
        searchType: this.searchType,
        attrType: 1
      }).then(res => {
        this.dataSource = res.result.records
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 表格选择行
     */
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handleTableChange(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.initAttributeList()
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    searchQuery() {
      this.searchType = 1
      this.initAttributeList()
    },
    searchQueryAll() {
      this.searchType = 2
      this.initAttributeList()
    },
    handleAdd() {
      this.$refs.modalForm.add(1)
      this.$refs.modalForm.title = '新增'
      this.$refs.modalForm.disableSubmit = false
    },
    handleEdit(record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '编辑'
      this.$refs.modalForm.disableSubmit = false
    },
    /**
     * 批量删除
     */
    handleDelete() {
      let that = this
      let ids = this.selectedRowKeys.join(',')
      console.log(ids)
      this.$confirm({
        title: '确定删除当前属性分组?',
        content: h => <div style="color:red;">删除后不可恢复</div>,
        onOk() {
          getAction(that.url.deleteCategoryById, { ids: id }).then(res => {
            if (res.success) {
              that.$message.success(res.message)
              that.initAttributeList()
            } else {
              that.$message.error(res.message)
            }
          })
        },
        onCancel() {
          that.$message.info('已取消删除！')
        },
        class: 'test'
      })
    },
    /**
     * 主键删除
     */
    deleteById(id) {
      getAction(this.url.deleteAttrGroupById, { id: id }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.initAttributeList()
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style>
@import '/src/assets/less/common.less';

.button-left {
  margin-left: 8px;
}
</style>